<template>
    <div v-show="showLoading" class="loading">
        <div><span></span></div>
        <div><span></span></div>
        <div><span></span></div>
        <div><span></span></div>
    </div>
</template>

<script>
    export default {
        name: "Loading",
        data() {
            return {
                showLoading: false
            }
        }
    }
</script>

<style lang="scss" scoped>
    .loading {
        width: 42px;
        height: 42px;
        margin: 100px auto 0;
        position: relative;
        div{
            width: 100%;
            height: 100%;
            position: absolute;
            -webkit-animation: load 2.08s linear infinite;
            &:nth-child(1){
                -webkit-animation-delay:0.2s;
            }
            &:nth-child(2){
                -webkit-animation-delay:0.4s;
            }
            &:nth-child(3){
                -webkit-animation-delay:0.6s;
            }
            &:nth-child(4){
                -webkit-animation-delay:0.8s;
            }
            span{
                display: inline-block;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: lightgreen;
                position: absolute;
                left: 50%;
                margin-top: -10px;
                margin-left: -10px;
            }
        }
    }
    @-webkit-keyframes load{
        0%{
            -webkit-transform: rotate(0deg);
        }
        10%{
            -webkit-transform: rotate(45deg);
        }
        50%{
            opacity: 1;
            -webkit-transform: rotate(160deg);
        }
        62%{
            opacity: 0;
        }
        65%{
            opacity: 0;
            -webkit-transform: rotate(200deg);
        }
        90%{
            -webkit-transform: rotate(340deg);
        }
        100%{
            -webkit-transform: rotate(360deg);
        }

    }
</style>
